<template>
   <div>
      <el-table stripe :data="tableData" height="calc(100vh - 320px)" style="width: 100%">
         <el-table-column prop="name" label="姓名" min-width="180" />
         <el-table-column prop="sex" label="性别" min-width="180">
            <template #default="scope">
               {{ scope.row.sex == 1 ? '男' : '女' }}
            </template>
         </el-table-column>
         <el-table-column prop="date" label="出生日期" min-width="180" />
         <el-table-column label="操作" min-width="180">
            <template #default="scope">
               <el-button type="primary" @click="$emit('editLine', scope.$index)" size="small">编辑</el-button>
               <el-button type="danger" @click="$emit('delLine', scope.$index)" size="small">删除</el-button>
            </template>
         </el-table-column>
      </el-table>
      <div class="flex-align flex-end" style="height:60px;">
         <el-pagination background layout="prev, pager, next" :total="100" />
      </div>
   </div>
</template>

<script setup>
//1.引用资源
import { ref } from 'vue'

//2.定义props
const props = defineProps(['tableData'])

//3.数据定义setup

const tableData = ref(props.tableData)

</script>

<style></style>